<!--
  Generated template for the BusinessFoodClassifyPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>菜品设置</ion-title>
    <ion-buttons end>
      <button class="btn-header-right" color="light-blue" ion-button (click)="addMenu()">
        <ion-icon name="add-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content padding>
    <div *ngIf=" foodTypeList.length <=0" class="empty">
  <page-empty></page-empty>
</div>
    <div class="all-con" *ngIf="foodTypeList.length > 0">
      <ion-scroll scrollY="true" class="con-left">

        <div *ngFor="let type of foodTypeList;let i = index">
          <!--<ion-card style="background-color: #ebf3fa">-->
            <div [ngClass]="type.chosen?'good-list-type-click':'good-list-type'" (click)="showFood(i,type.id)">
              {{type.foodtype}}
            </div>
          <!--<hr class="line"/>-->
          <!--</ion-card>-->


        </div>
      </ion-scroll>

      <ion-scroll scrollY="true" class="con-right">

        <!--<ion-refresher (ionRefresh)="doRefresh()">-->
          <!--<ion-refresher-content></ion-refresher-content>-->
        <!--</ion-refresher>-->

        <div class="container">
        <div *ngFor="let lst of menuList" class="lst-style">
          <div class="row-style">
            <div class="content-box" >
              <div class="class-box">
                <div style="font-size: 1.2rem;color: gray;text-align: left;padding-left: .5rem;border-left: 2px solid #ec79a5;">{{lst.foodTypeName}}</div>
                <div class="content-food-name">{{lst.foodname}} </div>
              </div>
              <div class="title-bottom">
                <button class="content-edit" (click)="modifyFood(lst.id,lst.foodname,lst.foodtype,lst.price,lst.stock,lst.imgId,lst.remark)">修改</button>
                <button class="content-delete" (click)="doConfirm(lst.id)">删除</button>
              </div>
            </div>
          </div>
        </div>
        </div>

        <!--<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">-->
          <!--<ion-infinite-scroll-content loadingSpinner="bubbles"-->
                                       <!--loadingText="正在加载下一页...">>-->

          <!--</ion-infinite-scroll-content>-->
        <!--</ion-infinite-scroll>-->
        <!--<div style="text-align: center;color: gray;" *ngIf="page.isLastPage">- - - - - - - - - - 我是有底线的哦 - - - - - - - - - -</div>-->
      </ion-scroll>
    </div>

</ion-content>
